<template>
  <div class="app-container">
    <div class="filter-container" style="margin-bottom: 10px">
      <el-select v-model="searchObj.provinceCode" style="width: 200px; margin-right: 10px" placeholder="请选择省" @change="provinceChanged">
        <el-option v-for="item in provinceList" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <el-select v-model="searchObj.CityCode" style="width: 200px; margin-right: 10px" placeholder="请选择市">
        <el-option
          v-for="item in cityList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <el-input v-model="searchObj.hosname" style="width: 200px; margin-right: 10px" placeholder="医院名称" />
      <el-button type="primary" icon="el-icon-remove" @click="resetData()">清空</el-button>
      <el-button type="primary" icon="el-icon-search" @click="fetchData()">查询</el-button>
      <el-button
        class="filter-item"
        style="margin-left: 15px"
        type="primary"
        icon="el-icon-document"
        @click="handleExport"
      >导出</el-button>
      <el-button
        class="filter-item"
        style="margin-left: 15px"
        type="primary"
        icon="el-icon-document"
        @click="handleImport"
      >导入</el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      style="width: 100%"
      row-key="id"
      border
      lazy
    >
      <el-table-column prop="name" label="序号">
        <template slot-scope="scope">
          {{ (page-1)*limit+scope.$index+1 }}
        </template>
      </el-table-column>
      <el-table-column label="医院logo">
        <template slot-scope="scope">
          <img :src="'data:image/jpeg;base64,'+scope.row.logoData" width="80">
        </template>
      </el-table-column>
      <el-table-column prop="hosname" label="医院名称" />
      <el-table-column prop="param.hostypeString" label="等级" />
      <el-table-column prop="para.fullAddress" label="地址" />
      <el-table-column label="状态">
        <template slot-scope="scope">
          {{ scope.row.status===0?'未上线': '已上线' }}
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column label="操作" width="230" align="center">
        <template slot-scope="scope">
          <router-link :to="'/hospSet/hospital/show/'+scope.row.id">
            <el-button type="primary" size="mini">查看</el-button>
          </router-link>&nbsp;
          <router-link :to="'/hospSet/hospital/schedule/'+scope.row.hoscode">
            <el-button type="primary" size="mini">排班</el-button>
          </router-link>&nbsp;
          <el-button v-if="scope.row.status == 1" type="primary" size="mini" @click="updateStatus(scope.row.id, 0)">下线</el-button>
          <el-button v-if="scope.row.status == 0" type="danger" size="mini" @click="updateStatus(scope.row.id, 1)">上线</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="page"
      :total="total"
      :page-size="limit"
      :page-sizes="[5, 10, 20]"
      style="padding: 30px 0;text-align:center;"
      layout="sizes,prev,pager,next,jumper,->,total,slot"
      @current-change="fetchData"
      @size-change="changeSize"
    />
    <el-dialog title="导入" :visible.sync="dialogVisible">
      <el-form label-position="right" label-width="170px">
        <el-form-item
          label="文件"
        ><el-upload
          action="http://localhost:9001/admin/cmn/dict/importData"
          :multiple="false"
          :on-success="onUploadSuccess"
          class="upload-demo"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传excel文件</div>
        </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="dialogVisible = false"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import hospApi from '@/api/hosp'
export default {
  data() {
    return {
      listLoading: true,
      list: null,
      total: 0,
      page: 1,
      limit: 5,
      searchObj: {
        provinceCode: '',
        cityCode: '',
        hosname: ''
      },
      provinceList: [],
      cityList: [],
      dialogVisible: false
    }
  },
  created() {
    this.fetchData()
    this.findAllProvince()
  },
  methods: {
    updateStatus(id, status) {
      hospApi.updateStatus(id, status).then(rep => {
        this.fetchData(1)
      })
    },
    fetchData(page = 1) {
      this.page = page
      hospApi.getHospList(this.page, this.limit, this.searchObj).then(rep => {
        this.list = rep.data.content
        this.total = rep.data.totalElements
        this.listLoading = false
      })
    },
    findAllProvince() {
      hospApi.findByDictCode('Province').then(rep => {
        this.provinceList = rep.data
      })
    },
    provinceChanged() {
      this.cityList = []
      this.searchObj.cityCode = ''
      hospApi.findChildId(this.searchObj.provinceCode).then(rep => {
        this.cityList = rep.data
      })
    },
    changeSize() {
      this.limit = this.size
      this.fetchData(1)
    },
    handleExport() {
      window.location.href = '/api/admin/cmn/dict/exportData'
    },
    handleImport() {
      this.dialogVisible = true
    },
    onUploadSuccess() {
      this.dialogVisible = false
      this.getDictList(1)
    },
    resetData() {
      this.searchObj.provinceCode = ''
      this.searchObj.cityCode = ''
      this.searchObj.hosname = ''
    }
  }
}
</script>
